<template>
    <div class="contentSty wd100">
        
        <!-- <div class="center mb20 colorfff fontSize16 fontbold">集团可持续发展分类</div> -->
        <!-- <ul class="whiteBg fontSize14">
            <li>集团可持续时尚战略</li>
            <li>集团可持续发展动态</li>
            <li>旗下各品牌可持续进展</li>
            <li>ESG报告</li>
        </ul> -->
        <ul class="flex flexWrap whiteBg">
            <li class="flex alignCenter fontSize13 flexCenter" v-for="(item,index) in dataList" :key="index" @click="goLink(item.id)">
                <div class="center">
                    <img :src="item.img+'?v=1'" class="disInline" style="width:0.64rem;margin-bottom:0.1rem"/>
                    <div>{{item.name}}</div>
                </div>
            </li>
            <!-- <li class="flex alignCenter fontSize13 flexCenter">
                <div class="center">
                    <img src="../../assets/image/dt.png" class="disInline" />
                    <div>集团可持续发展动态</div>
                </div>
            </li>
            <li class="flex alignCenter fontSize13 flexCenter">
                <div class="center">
                    <img src="../../assets/image/jd.png" class="disInline" />
                    <div>旗下各品牌可持续进展</div>
                </div>
            </li>
            <li class="flex alignCenter fontSize13 flexCenter">
                <div class="center">
                    <img src="../../assets/image/channelReport.png" class="disInline" />
                    <div>公司ESG报告</div>
                </div>
            </li> -->
        </ul>
    </div>
</template>
<script>
export default {
    name:'sustainableType',
    data(){
        return {
            dataList:[]
        }
    },
    created(){
        this.getCategory()
    },
    methods:{
        getCategory(){
            this.$apiRequest.getCategoryBySustainable({}).then(res=>{
                console.log('一级分类',res)
                if(res.code==1){
                    res.data.map(i=>{
                        i.id==4?i.img=require('../../assets/image/zl1.png'):'',
                        i.id==5?i.img=require('../../assets/image/dt1.png'):'',
                        i.id==6?i.img=require('../../assets/image/jd1.png'):'',
                        i.id==7?i.img=require('../../assets/image/gh1.png'):''
                    })
                    this.dataList=res.data
                }
            })
        },
        goLink(id){
            this.$router.push({path:'/sustainableList',query:{id:id}})
        }
    }
}
</script>
<style lang="less" scoped>
.contentSty{
    // background-color: #4873c1;
    background-image: linear-gradient(rgba(83, 114, 192),#c2d6f8);
    padding-top: 1.2rem;
    ul{
        width: 90%;
        margin: 0 auto;
        border-radius: 0.34rem;
        li{
            width: 50%;
            height: 2rem;
        }
        li:first-child{
            border-right: 1px #ddd solid;
            border-bottom: 1px #ddd solid;
        }
        li:nth-child(2){
            border-bottom: 1px #ddd solid;
        }
        li:nth-child(3){
            border-right: 1px #ddd solid;
        }
    }
}
</style>